---
import type { ItemList as ItemListType } from "../_utils/getContentList";
import ColorMap from "@/styles/PersonalThemeColor";

export interface Props {
  ItemList: typeof ItemListType;
}

const { ItemList: ItemListValue } = Astro.props;
---

<strong>你可以使用右侧索引来查找相关 liver 或使用 Ctrl+F 来搜索物品</strong>
{
  Object.entries(ItemListValue).map(([liver, list]) => (
    <>
      <h3
        id={ColorMap[liver as keyof typeof ColorMap].cnName}
        style={{
          "--theme-color": ColorMap[liver as keyof typeof ColorMap].color,
        }}
      >
        {ColorMap[liver as keyof typeof ColorMap].cnName}
      </h3>
      <div class="flex gap-3 flex-wrap">
        {list.map(({ item: v }) => (
          <a class="flex items-center !text-white gap-1" href={v.link}>
            {v.smallIcon && (
              <img
                class="!bg-transparent w-6 h-6"
                src={v.smallIcon}
                alt={v.name}
              />
            )}
            {v.name}
          </a>
        ))}
      </div>
    </>
  ))
}
